import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:getwidget/components/shimmer/gf_shimmer.dart';

import '../controllers/gfshimmer_controller.dart';

class GfshimmerView extends GetView<GfshimmerController> {
  // 声明骨架屏
  final Widget emptyBlock = Padding(
    padding: const EdgeInsets.symmetric(vertical: 16),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 54,
          height: 48,
          color: Colors.white,
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                width: double.infinity,
                height: 12,
                color: Colors.white,
              ),
              const SizedBox(height: 6),
              Container(
                width: Get.width * 0.23,
                height: 12,
                color: Colors.white,
              ),
              const SizedBox(height: 6),
              Container(
                width: Get.width * 0.54,
                height: 12,
                color: Colors.white,
              ),
            ],
          ),
        )
      ],
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('骨架屏'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.all(10),
        child: ListView(
          children: [
            GFShimmer(
              child: emptyBlock,
            ),
            Divider(),

            GFShimmer(
              child: const Text(
                'GF Shimmer',
                style: TextStyle(
                  fontSize: 48, 
                  fontWeight: FontWeight.w700
                ),
              ),
              showGradient: true,
              gradient: LinearGradient(
                begin: Alignment.bottomRight,
                end: Alignment.centerLeft,
                stops: const <double>[0, 0.3, 0.6, 0.9, 1],
                colors: [
                  Colors.teal.withOpacity(0.1),
                  Colors.teal.withOpacity(0.3),
                  Colors.teal.withOpacity(0.5),
                  Colors.teal.withOpacity(0.7),
                  Colors.teal.withOpacity(0.9),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
